<!--动态折线图-->
<template>
        <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 2020,
                total: 0,
                data0: [],
                languages: [],
            };
        },
        created() {

        },
        methods: {
            initCharts () {

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    request.get('/languageData',{ // 请求/scatterClustering接口
                            params: {

                            }
                    }).then(res=>{

                            this.data0=[["language","date","percent"]];
                            this.languages=[];

                            for (var i=0;i<res.data.records.length;i++)
                            {
                                    var language=res.data.records[i]['language'];
                                    var date=res.data.records[i]['date'];
                                    var percent=res.data.records[i]['percent'];

                                    var index = this.languages.indexOf(language)
                                    if(index===-1) {
                                            this.languages.push(language);
                                    }

                                    this.data0.push([language,date,percent]);
                            }

                            // run1(res);
                            console.log(res)
                            console.log(this.data0)
                            console.log(this.languages)

                            var programings = this.languages;
                            var datasetWithFilters = [];
                            var seriesList = [];

                            echarts.util.each(programings, function (language) {
                                    var datasetId = 'dataset_' + language;
                                    datasetWithFilters.push({
                                            id: datasetId,
                                            fromDatasetId: 'dataset_raw',
                                            transform: {
                                                    type: 'filter',
                                                    config: {
                                                            and: [
                                                                    // { dimension: 'Year', gte: 1950 },
                                                                    { dimension: 'date', gte: 2001 },
                                                                    { dimension: 'language', '=': language }
                                                            ]
                                                    }
                                            }
                                    });
                                    seriesList.push({
                                            type: 'line',
                                            datasetId: datasetId,
                                            showSymbol: false,
                                            name: language,
                                            endLabel: {
                                                    show: true,
                                                    formatter: function (params) {
                                                            return params.value[0] + ': ' + params.value[2]+'%';
                                                    }
                                            },
                                            labelLayout: {
                                                    moveOverlap: 'shiftY'
                                            },
                                            emphasis: {
                                                    focus: 'series'
                                            },
                                            encode: {
                                                    x: 'date',
                                                    y: 'percent',
                                                    label: ['language', 'percent'],
                                                    itemName: 'date',
                                                    tooltip: ['percent'],
                                            }
                                    });
                            });

                            option = {
                                    animationDuration: 10000,
                                    dataset: [{
                                            id: 'dataset_raw',
                                            source: this.data0
                                    }].concat(datasetWithFilters),
                                    title: {
                                            text: '编程语言的使用率变化趋势图',
                                            subtext: '数据截止至: 2021.08.11'
                                    },
                                    tooltip: {
                                            order: 'valueDesc',
                                            trigger: 'axis'
                                    },
                                    toolbox: {  // 显示保存图片的按钮
                                            show: true,
                                            orient: 'horizontal',
                                            top: 10,
                                            right: 20,
                                            feature: {
                                                    saveAsImage: {}
                                            }
                                    },
                                    xAxis: {
                                            name: '年份',
                                            type: 'category',
                                            nameLocation: 'middle'
                                    },
                                    yAxis: {
                                            name: '使用率'
                                    },
                                    grid: {
                                            top: 120,
                                            right: 140
                                    },
                                    series: seriesList
                            };

                            myChart.setOption(option);
                    });

                    option && myChart.setOption(option);
            },
        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>